<template>
	<view class="container">
		
		<view class="dl_box">
			<view class="logo">
				
			</view>

			<view class="forget-input-group">
				
				<input class="forget-input" v-model="mobile" type="number" placeholder="您的手机号"
					placeholder-style="color:#bbb" />
			</view>
			<view class="forget-input-group">
				
				<view class="forget-input-box">
					<input type="number" class="forget-input" v-model="verifycode" maxlength="5" value="" placeholder="短信验证码"
						placeholder-style="color:#bbb" />
					<button class="button" type="default" :disabled="codebtn" @click="getcode"
						v-cloak>{{codetext}}</button>
				</view>
			</view>
			<view class="forget-input-group">
			
				<input class="forget-input" v-model="pwd" password type="text" placeholder="请输入新登录密码"
					placeholder-style="color:#bbb" />
			</view>
			<view class="forget-input-group">
			
				<input class="forget-input" v-model="pwd1" password type="text" placeholder="请确认新登录密码"
					placeholder-style="color:#bbb" />
			</view>
			
		</view>
		<view class="button-group">
			<button type="default" @click="forget" :loading="loading"
				style="background: #180185;color:#fff">找回密码</button>
			<button style="background: #3E358F;color:#fff" type="primary" @click="backlogin">返回登录</button>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				area: true,
				top: false,
				loading: false,
				codebtn: false,
				mobile: '',
				pwd: '',
				pwd1: '',
				imgcode: "",
				verifycode: '',
				codetext: '获取验证码',
				openid: '',
				codenum: 60
			};
		},
		onLoad: function() {
			uni.hideLoading()
		},
		onBackPress(options) {
			this.back();  
			return true;  
		}, 
		methods: {
			backlogin() {
				uni.reLaunch({
					url: "../login"
				})
			},
			forget() {
				if (this.mobile == "") {
					uni.showToast({
						title: '请输入手机号',
						icon: "none"
					});
				} else if (this.pwd == "") {
					uni.showToast({
						title: '请输入登录密码',
						icon: "none"
					});
				} else if (this.pwd1 == "") {
					uni.showToast({
						title: '请确认登录密码',
						icon: "none"
					});
				} else if (this.verifycode == "") {
					uni.showToast({
						title: '请输入短信验证码',
						icon: "none"
					});
				} else {
					this.loading = true
					uni.request({
						url: this.$BASE_URL +
							'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=account.forget&type=0&app=1',
						method: 'POST',
						data: {
							mobile: this.mobile,
							pwd: this.pwd,
							pwd1: this.pwd1,
							verifycode: this.verifycode
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: res => {
							this.loading = false
							console.log(JSON.stringify(res))
							uni.showToast({
								title: res.data.result.message,
								icon: "none"
							});
							if (res.data.status == 1) {
								setTimeout(() => {
									uni.reLaunch({
										url: "../login"
									})
								}, 1500)
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			getcode() {
				if (this.mobile == "") {
					uni.showToast({
						title: '请输入手机号',
						icon: "none"
					});
				}else {
					uni.request({
						url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=account.verifycode&app=1',
						method: 'POST',
						data: {
							mobile: this.mobile,
							temp: 'sms_forget'
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: res => {
							uni.showToast({
								title: res.data.result.message,
								icon: "none"
							});
							if (res.data.status == 1) {
								this.codebtn = true
								var codetexts = setInterval(() => {
									this.codenum = this.codenum - 1
									this.codetext = this.codenum + 's'
								}, 1000)
								setTimeout(() => {
									this.codebtn = false
									clearInterval(codetexts);
									this.codetext = '重新发送'
								}, 60000)
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
			}
		}
	}
</script>

<style lang="less">
	page {
		height: 100vh;
		width: 100vw;
	}
	.button-group{
		width: 90%;
		margin: 0 auto;
		padding:30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		button{
			width:47%;
			font-size: 28rpx;
		}
	}
.forget-input-group {
	margin: 20px;
		border-radius: 6px;
		overflow: hidden;
		margin-top:30rpx;
		.forget-input-text {
			font-size: 24rpx;
			color: #888;
			padding:16rpx 30rpx;
		}
		.forget-input{
			border-bottom: 1px solid #f8f8f8;
			color: #fff;
		}
	
		.forget-input-box{
			
			display: flex;
			align-items: center;
		}
		.forget-img{
			width: 180rpx;
			height: 90rpx;
			object-fit: contain;
		}
		.forget-button{
			width: 180rpx;
			height: 80rpx;
			background-color: #05052B;
			color:#fff;
			text-align: center;
			line-height: 80rpx;
			font-size: 24rpx;
		}
	}

	.container {
		height: 100vh;
		width: 100vw;
		background: url('/static/zn/forget_bg.png') 0 0 no-repeat;

		background-size: 100% 100%;
		box-sizing: border-box;
		padding: 130px 15px 52px;

	}
	
	.button {
		width: 35%;
		background-color: #180185;
		color: #fff;
		border-radius: 5px;
		padding: 2px;
		text-align: center;
		height: 30px;
		font-size: 12px;
	}

	.top_bar {
		color: #fff;
		display: flex;
		justify-content: space-around;

		.dl {
			font-size: 24px;
			font-weight: 700;
			border-bottom: 3px solid #fff;
		}

		.zc {
			font-size: 19px;
			padding-bottom: 3px;
		}
	}

	.dl_box {
		width: 100%;
		
	
		background-size: cover;
		padding: 31px 41px;
		display: flex;
		flex-direction: column;
		// align-items: center;
		background: url('/static/zn/forget_box.png')0 0 no-repeat;
		background-size: 100% 100%;
		.logo{
			width: 50%;
			height: 250rpx;
			background: url('/static/zn/logo.png')0 0 no-repeat;
			background-size: 100% 100%;
			margin: 0 auto;
		}
		.dl_top{
			color: #fff;
			    font-size: 26px;
			    margin-bottom: 15px;
				text-align: center;
			
		}
		.input_name{
			color: #fff;
		}
		.input{
			   
			display: flex;
			position: relative;
			background-color: transparent;
			border-bottom: 1px solid #8378A0;
			.uni-input{
				color: #fff;
			background-color: transparent;
			}
			.close,.look{
				position: absolute;
				right: 2px;
				top: 0;
				bottom: 0;
				margin:  auto;
			}

		}
	}
	
	.dl_box>view{
		// border: 1px solid red;
	}
	.dl_button{
		
		margin-top: 52px;
		height: 45px;
		background-color: #180185;
		border-radius: 15px;
		font-size: 20px;
		color: #fff;
		text-align: center;
		line-height: 45px;
	}
	.wnagjmm{
		margin: 20rpx 0;
		text-align: center;
		color:  #fff;
	}
	.ok_look{
		width: 100%;
		text-align: center;
	}
	.bottom{
		width:100%;
		color: #4481ff;
		text-align: center;
	}
</style>